<template>
<el-container>
	<el-header class="header-tabs">
		<el-tabs type="card" v-model="groupId">
			<el-tab-pane label="信息总览" name="0"></el-tab-pane>
			<el-tab-pane label="刻制申请" name="1"></el-tab-pane>
		</el-tabs>
	</el-header>
	<el-main class="nopadding" style="overflow-x: hidden;">
		<engraveTable v-if="groupId === '0'"></engraveTable>	
		<el-form v-else ref="form" :rules="rules" :model="basicInfo" label-width="100px" style="margin-top: 20px;">
			<el-row :gutter="10">
				<el-col :span="10">
					<el-form-item label="主题" size="large" prop="topic">
						<el-input v-model="basicInfo.topic" readonly></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="10">
					<el-form-item label="申请时间" size="large" prop="applyTime"> 
						<el-input v-model="basicInfo.applyTime" readonly></el-input>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="10">
				<el-col :span="10">
					<el-form-item label="工号" size="large" prop="jobNumber">
						<el-input v-model="basicInfo.jobNumber" readonly></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="10">
					<el-form-item label="姓名" size="large" prop="username">
						<el-input v-model="basicInfo.username" readonly></el-input>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="10">
				<el-col :span="10">
					<el-form-item label="地区" size="large" prop="place">
						<el-input v-model="basicInfo.place" readonly></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="10">
					<el-form-item label="工厂" size="large" prop="factory">
						<el-input v-model="basicInfo.factory" readonly></el-input>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="10">
				<el-col :span="10">
					<el-form-item label="部门" size="large" prop=department>
						<el-input v-model="basicInfo.department" readonly></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="10">
					<el-form-item label="邮箱" size="large" prop="email">
						<el-input v-model="basicInfo.email"></el-input>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="10">
				<el-col :span="20">
					<el-form-item label="申请原因" size="large" prop="applyReason">
						<el-input v-model.trim="basicInfo.applyReason" type="textarea" placeholder="请输入申请原因"></el-input>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="10">
				<el-col :span="20">
				<el-form-item label="刻制印章" prop="applySealInfo">
					<byd-form-table	v-model="form.list" drag-sort placeholder="请点击左上角加号(+)添加印章数据" style="width: 100%"> 
						<el-table-column label="印章名称" width="180" prop="sealName"> 
							<template #default="scope">
								<el-input  v-model.trim="scope.row.sealName" placeholder="请输入印章名称"></el-input>
							</template>
						</el-table-column>
						<el-table-column label="物料编号" width="180">
							<template #default="scope">
								<el-input v-model.trim="scope.row.materialCode" placeholder="请输入物料编号"></el-input>
							</template>
						</el-table-column>
						<el-table-column label="规格" width="180">
							<template #default="scope">
								<el-input v-model.trim="scope.row.specifications" placeholder="请输入规格"></el-input>
							</template>
						</el-table-column>
						<el-table-column label="颜色" min-width="120">
							<template #default="scope">
								<el-input v-model.trim="scope.row.sealColor" placeholder="请输入颜色"></el-input>
							</template>
						</el-table-column>
						<el-table-column label="数量" width="105">
							<template #default="scope">
								<!-- <el-input type="number" v-model.number="scope.row.sealCount" placeholder="请输入数量"></el-input> -->
								<el-input-number v-model="scope.row.sealCount" :min="1" style="width: 80px" size="small" />
							</template>
						</el-table-column>
						<el-table-column label="印章图样" width="175">
							<template #default="scope">
								<el-upload
									class="avatar-uploader"
									:show-file-list="false"
									:before-upload="beforeAvatarUpload"
									:on-success="(res, file) => handleAvatarSuccess(res, file, scope)"
									:http-request="request">
									<img v-if="scope.row.$url" :src="scope.row.$url" class="avatar" />
									<el-icon v-else class="avatar-uploader-icon"><ElIconPlus /></el-icon>
								</el-upload>
							</template>
						</el-table-column>
						<el-table-column label="印章类型" width="130">
							<template #default="scope">
								<el-select v-model="scope.row.sealType" placeholder="印章类型">
									<el-option label="实体印章" value="实体印章" />
									<el-option label="电子印章" value="电子印章" />
								</el-select>
							</template>
						</el-table-column>
						<el-table-column label="备注" width="180">
							<template #default="scope">
								<el-input v-model.trim="scope.row.engraveRemark" type="textarea" placeholder="请输入备注，没有则填无"></el-input>
							</template>
						</el-table-column>
					</byd-form-table>
				</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="10">
				<el-col :span="10">
					<el-form-item label="审核人" size="large" prop=approveNumber>
						<el-input v-model="basicInfo.approveNumber" readonly>
							<template #append>
								<el-button @click="peopleSearch">查询</el-button>
							</template>
						</el-input>
					</el-form-item>
				</el-col>
			</el-row>
			<el-form-item>
				<el-button @click="resetForm('form')">重置</el-button>
				<el-button :loading="submitBtnLoad" type="primary" @click="onSubmit('form')">提交申请</el-button>
			</el-form-item>
		</el-form>
		<peopleSearch title="人员查询" v-model="dialogVisible" @selectChange="checkPeople"/>
	</el-main>
</el-container>
</template>

<script>
	import { Check } from '@element-plus/icons-vue'
	import engraveTable from './engraveTable'
	import peopleSearch from '@/views/components/peopleSearch.vue'
	export default {
		name: 'engraveList',
		components:{Check,engraveTable, peopleSearch},
		data() {
			return {
				groupId: '0',
				submitBtnLoad:false,
				basicInfo: {
					topic: "",
					applyTime: '',
					jobNumber: "",
					name: "",
					place: "",
					factory: "",
					department: "",
					email:"",
					applyReason: "",
					approveNumber:""
				},
				form: {
					title: "印章信息",
					list: []
				},
				rules:{
					topic:[
						{required:true,message:'请输入主题',trigger:'blur'}
					],
					applyTime:[
						{required:true,message:'请输入申请时间',trigger:'blur'}
					],
					jobNumber:[
						{required:true,message:'请输入工号',trigger:'blur'}
					],
					username:[
						{required:true,message:'请输入姓名',trigger:'blur'}
					],
					place:[
						{required:true,message:'请输入地区',trigger:'blur'}
					],
					factory:[
						{required:true,message:'请输入工厂',trigger:'blur'}
					],
					email:[
						{type: 'email',message: '请输入正确的邮箱格式',trigger:'blur'}
					],
					applyReason:[
						{required:true,message:'请输入申请原因',trigger:'blur'}
					],
					approveNumber:[
						{required:true,message:'请选择审核人',trigger:['change', 'blur']}
					],
				},
				dialogVisible: false,
			}
		},
		mounted(){
			let user = this.$tool.data.get("USER_INFO");
			this.basicInfo = {
				topic: user.username + "(" + user.jobnumber + ")" + "的事业部内部印章刻制申请",
				applyTime: this.$tool.dateFormat(new Date(), 'yyyy-MM-dd hh:mm:ss'),
				jobNumber : user.jobnumber,
				username : user.username,
				place : user.workPlace,
				email : user.email
			}
			if(user.factory != "" && user.factory != null){
				this.basicInfo.factory = user.factory;
				this.basicInfo.department = user.department;
			}else{
				this.basicInfo.factory = user.department;
				this.basicInfo.department = user.office;
			}
		},
		methods: {
			beforeAvatarUpload(file) {
				const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
				const isLt2M = file.size / 1024 / 1024 < 5;
				if (!isJPG) {
				this.$message.error('上传头像图片只能是图片格式!');
				}
				if (!isLt2M) {
				this.$message.error('上传头像图片大小不能超过5MB!');
				}
				return isJPG && isLt2M;
			},
			handleAvatarSuccess(res, file, scope) {
				if(scope && scope.row) {
					scope.row.$url = URL.createObjectURL(file.raw);
					scope.row.sealPattern = res?.data?.data?.src;
				}
			},
			request(param){
				const data = new FormData();
				var file = param.file
				data.append("file", file);
				this.$api.engrave.myupload.post(data).then(res => {
					param.onSuccess(res)
				}).catch(err => {
					param.onError(err)
				})
			},
			peopleSearch(){
				//查找审批人
				this.dialogVisible = true;
			},
			checkPeople(row = {}){
				const { jobnumber,username } = row;
				this.basicInfo.approveNumber = jobnumber + "-" + username;
			},
			//重置表单
			resetForm() {
				this.basicInfo.email = this.$tool.data.get("USER_INFO").email;
				this.basicInfo.applyReason = ""
				this.form.list = []
			},
			//提交表单
			onSubmit(formName) {
				this.submitBtnLoad = true;
				this.$refs[formName].validate(async (valid) => {
					if (valid) {
						let finish = true;
						if(!this.form.list.length > 0){
							this.$message.error('请添加刻制印章信息!');
							finish = false;
						}else{
							var notComplete = new Set;
							this.form.list.forEach((item, id) => {
								if(JSON.stringify(item) == "{}"){
									finish = false;
									notComplete.add(id + 1);
								}else{
									const valueList = Object.values(item);
									if(valueList.length != 9){
										finish = false;
										notComplete.add(id + 1);
									}else{
										valueList.forEach(function(i){
											if(i == '' || i == null){
												finish = false;
												notComplete.add(id + 1);
												return false;
											}
										})
									}
								}
							})	
						}
						if(!finish){
							this.submitBtnLoad = false;
							if(notComplete && notComplete.size > 0){
								let permission = Array.from(notComplete).join(",");
								this.$message.error("请补全第" + permission + "行刻制印章信息")
							}
							return false;
						}else{//提交后端
							var applyResult = await this.$api.engrave.engraveApply.post({
								...this.basicInfo,
								sealInfo: JSON.stringify(this.form.list)
							})
							if(applyResult.respCode == "0000"){
								this.$message({
									message: applyResult.respDesc,
    								type: 'success',
								})
								setTimeout(() => {
									location.reload();
								},1500)
							}else{
								this.submitBtnLoad = false;
								this.$message.error(applyResult.respDesc)
							}
						}
					} else {
						console.log('error submit!!');
						this.submitBtnLoad = false;
						return false;
					}
				});
			},
		}
	}
</script>

<style>
	.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}
	.avatar-uploader .el-upload:hover {
		border-color: #409EFF;
	}
	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 150px;
		height: 150px;
		line-height: 150px;
		text-align: center;
	}
	.avatar {
		width: 150px;
		height: 150px;
		display: block;
	}
</style>
